<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .root {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }

        .box {
            width: 50%;
            height: 80%;
            background-color: white;
            border-radius: 1vw;
            box-shadow: 0 0 1vw skyblue;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .top {
            width: 100%;
            height: 10%;
            /* background-color: red; */
            font-size: 2vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 550;
        }

        .inner {
            box-sizing: border-box;
            width: 100%;
            height: 70%;
            display: flex;
            flex-direction: column;
            border-top: 0.1vw solid darkgray;
            border-bottom: 0.1vw solid darkgray;
        }

        .msgBox {
            list-style: none;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .msg_other {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-height: 12%;
            width: 100%;
        }

        .m_other {
            margin-left: 1vw;
            min-width: 2vw;
            background-color: white;
            height: 80%;
            border-radius: .5vw;
            box-shadow: 0 0 2px gray;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 1vw;
            padding-right: 1vw;
        }

        .msg_self {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            min-height: 12%;
            width: 100%;
        }

        .m_self {
            margin-right: 1vw;
            min-width: 2vw;
            background-color: skyblue;
            color: white;
            min-height: 80%;
            border-radius: .5vw;
            /* display: flex;
            flex-wrap: wrap;
            align-items: center; */
            white-space:pre-wrap;
            /* overflow: auto; */
            line-height: 5vh;
            padding-left: 1vw;
            padding-right: 1vw;
        }

        .input {
            width: 100%;
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        textarea {
            border: none;
            outline: none;
            resize: none;
            height: 70%;
            background-color: transparent;
            font-size: 1.4vw;
            border-bottom: .1vw darkgray solid;
            padding-left: .5vw;
        }

        textarea:active {
            border: none;
        }

        button {
            width: 4vw;
            height: 22%;
            position: absolute;
            right: .3vw;
            bottom: .3vw;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="box">
            <div class="top">聊天中</div>
            <div class="inner">
                <ul class="msgBox">
                    <!-- <li class="msg_other">
                        <div class="m_other">123123</div>
                    </li>
                    <li class="msg_self">
                        <div class="m_self">123123</div>
                    </li> -->
                </ul>
            </div>
            <div class="input">
                <textarea class="msg"></textarea>
                <button class="submit">发送</button>
            </div>
        </div>
    </div>

    <script>
        let ws = new WebSocket('ws://172.20.244.28:9974');
        let msg = document.querySelector('.msg');
        let submit = document.querySelector('.submit');

        ws.onopen = (res) => {
            console.log('连接已建立', res);
        }

        ws.onmessage = (msg) => {
            console.log(msg.data);
            makeOtherMsg(msg.data);
        }

        submit.onclick = sendMsg;

        msg.onkeydown = (e)=>{
            if(e.key=='Enter'){
                sendMsg();
            }
        }

        function sendMsg(){
            ws.send(msg.value);
            console.log(msg.value);
            makeSelfMsg(msg.value);
            msg.value = '';
        }

        function makeSelfMsg(data) {
            let msgBox = document.querySelector('.msgBox');
            let li = document.createElement('li');
            let div = document.createElement('div');
            li.classList.add('msg_self');
            div.classList.add('m_self');
            div.innerHTML = data;
            li.appendChild(div);
            msgBox.appendChild(li);
        }

        function makeOtherMsg(data) {
            let msgBox = document.querySelector('.msgBox');
            let li = document.createElement('li');
            let div = document.createElement('div');
            li.classList.add('msg_other');
            div.classList.add('m_other');
            div.innerHTML = data;
            li.appendChild(div);
            msgBox.appendChild(li);
        }
    </script>
</body>

</html>